Lordicon Extension for Quarto
This extension allows you to use lordicon icons in your Quarto HTML documents.
CSS Sizing
To quickly change the size of all icons on a page, use one of the following options. To change the size of specific icons or sets of icons, see the Class and Style sections below.
- Add an HTML chunk with the
<style>element to your .qmd file
Added to .qmd file
```{html} <style> lord-icon { width: 100px; height: 100px; } </style> ```
- Create an external .css file and point to it in your YAML header.
Added to styles.css
lord-icon { width: 100px; height: 100px; }
Added to .qmd header
--- format: html: css: styles.css ---
Source
The {{< li >}} shortcode renders an icon (specified by its code) after downloading it from the lordicon CDN. The code of each icon can be found on lordicon by clicking Export and then “Embed HTML.” The code will be displayed towards the bottom of the popup screen.
The {{< lif >}} shortcode renders an icon (specified by its filepath) from a local .json file. The file can be downloaded from lordicon by clicking Export and then “JSON (Lottie).” Note that some customization options may only be available with the larger “Raw” file type.
| ShortCode | Rendered |
|---|---|
{{< li wlpxtupd >}} |
|
{{< lif church.json >}} |
Colors
colors controls the icon’s coloring. Outline icons typically have just a primary and secondary color, but flat and lineal icons can have many more. Each color should be given in rank:color format (where ranks are primary, secondary, tertiary, etc.) and multiple colors should be separated by commas. Colors can be given in HTML color names or hexcodes.
| Shortcode | Icon |
|---|---|
{{< li lupuorrc >}} |
|
{{< li lupuorrc colors=primary:gold >}} |
|
{{< li lupuorrc colors=secondary:gold >}} |
|
{{< li lupuorrc colors=primary:gray,secondary:orange >}} |
|
{{< li lupuorrc colors=primary:#4030e8,secondary:#ee66aa >}} |
Stroke
stroke controls how thick the lines in an icon are.
| Shortcode | Icon |
|---|---|
{{< li lupuorrc stroke=25 >}} |
|
{{< li lupuorrc stroke=50 >}} |
|
{{< li lupuorrc stroke=75 >}} |
Trigger
trigger controls the icon’s animation type. When using the loop or loop-on-hover triggers, you can also set an optional delay (in ms) between loops.
| Shortcode | Icon |
|---|---|
{{< li wxnxiano >}} |
|
{{< li wxnxiano trigger=click >}} |
|
{{< li wxnxiano trigger=hover >}} |
|
{{< li wxnxiano trigger=loop >}} |
|
{{< li wxnxiano trigger=loop-on-hover >}} |
|
{{< li wxnxiano trigger=morph >}} |
|
{{< li wxnxiano trigger=boomerang >}} |
|
{{< li wxnxiano trigger=in >}} |
State
Many icons support different animation states. These are viewable from the lordicon website.
| Shortcode | Icon |
|---|---|
{{< li laqlvddb trigger=morph state=morph-mantion >}} |
|
{{< li laqlvddb trigger=morph state=morph-neighbourhood >}} |
|
{{< li laqlvddb trigger=loop state=loop-3d-roll >}} |
|
{{< li laqlvddb trigger=loop state=loop-smoke >}} |
Class
Each icon object can be given a CSS class (defined in your style element or external CSS file, as described above).
Added to .qmd file
```{html} <style> lord-icon.myclass { width: 50px; height: 50px; } </style> ```
| Shortcode | Icon |
|---|---|
{{< li laqlvddb >}} |
|
{{< li laqlvddb class=myclass >}} |
Style
Each icon object can also be styled “on-the-fly” using style.
| Shortcode | Icon |
|---|---|
{{< li laqlvddb >}} |
|
{{< li laqlvddb style=width:50px;height:50px; >}} |